<template>
  <!-- 酒店信息 -->
  <div class="pageWrap">
    <div class="tit">酒店文本介绍</div>
    <RichTxt ref="editor"></RichTxt>
    <div class="tit">
      酒店地点坐标
      <el-button @click="addThings()">添加</el-button>
    </div>
    <el-form :inline="true">
      <div v-for="(v,i) in list" :key="i">
        <el-form-item label="名称">
          <el-input
            v-model="v.name"
            :id="'suggestId'+i"
            placeholder="请输入内容"
            style="width:200px"
            @focus="initMap(i)"
          ></el-input>
          <el-input v-model="v.lng" placeholder="请输入经度" style="width:200px"></el-input>
          <el-input v-model="v.lat" placeholder="请输入纬度" style="width:200px"></el-input>
          <el-button type="danger" icon="el-icon-delete" circle @click="list.splice(i,1)"></el-button>
        </el-form-item>
        <div id="mapContainer" ref="allmap"></div>
        <div
          id="searchResultPanel"
          style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"
        ></div>
      </div>
    </el-form>
    <el-button type="primary" @click="save()">保存</el-button>
  </div>
</template>

<script>
function G(id) {
  return document.getElementById(id);
}
function bd09togcj02(bd_lon, bd_lat) {
  var x_pi = (3.14159265358979324 * 3000.0) / 180.0;
  var x = bd_lon - 0.0065;
  var y = bd_lat - 0.006;
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  var gg_lng = z * Math.cos(theta);
  var gg_lat = z * Math.sin(theta);
  return [gg_lng, gg_lat];
}
import RichTxt from "../../../../components/editor/editor";
var eId = 0;
export default {
  components: { RichTxt },
  data() {
    return {
      list: [],
      map: "",
    };
  },
  methods: {
    addThings() {
      this.list.push(
        JSON.parse(
          JSON.stringify({
            lng: "",
            lat: "",
            name: "",
          })
        )
      );
    },
    save() {
      this.list = this.list.filter((v) => {
        return v.lat && v.lng;
      });
      // console.log(this.list)
      let oo = {
        matchId: Number(this.$Base64.decode(sessionStorage.getItem("MandA"))),
        list: JSON.stringify(this.list),
        info: this.$refs.editor.content,
        id: eId,
        type:'H'
      };
      this.$axios.post("/sbr/match/putMatchTraffic", oo).then((res) => {
        let rr = res.data.data;
        this.getThings();
        this.$message.success("保存成功");
      });
    },
    // 获取酒店信息
    getThings() {
      let oo = {
        matchId: Number(this.$Base64.decode(sessionStorage.getItem("MandA"))),
        type: "H",
      };
      this.$axios
        .get("/sbr/match/getMatchTraffic", {params:oo})
        .then((res) => {
          let rr = res.data.data;
          if (rr) {
            eId = rr.id;
            if(rr.list)this.list = JSON.parse(rr.list);
            else this.list = []
            this.$refs.editor.content = rr.info;
          }
        });
    },
    // 搜索地址
    searchKeyword() {
      var keyword = this.fristForm.address;
      this.clearOverlays(markersArray);
      //根据输入的城市设置搜索范围
      // searchService.setLocation("北京");
      //根据输入的关键字在搜索范围内检索
      if (keyword) {
        // searchService.search(keyword);
        geocoder.getLocation(keyword);
      } else {
        alert("请输入地址");
      }
    },
    initMap(i) {
      // 百度地图API功能
      this.map = new BMap.Map(this.$refs.allmap[i]); // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
      var ac = new BMap.Autocomplete({
        //建立一个自动完成的对象
        input: "suggestId" + i,
        location: this.map,
      });

      ac.addEventListener("onhighlight", function (e) {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      let that = this;
      ac.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        G("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        that.setPlace(myValue, i);
      });
    },
    setPlace(myValue, i) {
      console.log(myValue, i);
      let that = this;
      that.map.clearOverlays(); //清除地图上所有覆盖物
      function myFun() {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        that.map.centerAndZoom(pp, 18);
        that.map.addOverlay(new BMap.Marker(pp)); //添加标注
        let a = bd09togcj02(pp.lng, pp.lat);
        // console.log(a)
        that.list[i].lng = a[0];
        that.list[i].lat = a[1];
      }
      var local = new BMap.LocalSearch(that.map, {
        //智能搜索
        onSearchComplete: myFun,
      });
      that.list[i].name = myValue;
      local.search(myValue);
    },
  },
  created() {
    this.addThings();
    this.getThings();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.tit {
  font-size: 18px;
  margin: 10px 0;
}

#mapContainer {
  width: 100%;
  height: 300px;
  display: none;
}
</style>